<template>
  <div>
    <!-- 暂时兼容生鲜水果和冲调茶饮，如果有别的需要兼容 颜色和背景改为动态上传的 -->
    <div class="tpl18-head-new" :class="type == 'Header_style6_new' ? 'tpl6_new' : ''">
      <div class="tpl18-nav">
        <div class="search_form">
          <button type="submit" class="j-search-button btn_sele" @click="searchList"></button>
          <input type="text" name="title" placeholder="请输入商品名称"  v-model="keyword"  @confirm="searchList"/>
        </div>
        <!-- 小程序端用swiper -->
        <wx-swiper v-if="type == 'Header_style6_new'" class="imgadv-wx-swiper" style="height: 180px" :circular="true" indicator-color="#ebedf0" indicator-active-color="#979E06" autoplay="3000" :indicator-dots="tplItemData.dataset.length > 1 ? true: false">
          <wx-swiper-item class="imgadv-wx-swiper-item" v-for="(item,index) in tplItemData.dataset" :key="index" @click="openLink(item.link)">
            <!-- <a :href="item.link? item.link: 'javascript:;'" :title="item.showtitle"> -->
              <img class="img" :src="item.pic" alt="" mode="aspectFill">
            <!-- </a> -->
          </wx-swiper-item>
        </wx-swiper>
        <template v-if="type == 'Header_style18'">

        <wx-swiper class="imgadv-wx-swiper" style="height: 170px" :circular="true" indicator-color="#ebedf0" indicator-active-color="#00c257" autoplay="3000" :indicator-dots="tplItemData.content.dataset_swipe.length > 1 ? true: false">
          <wx-swiper-item class="imgadv-wx-swiper-item" v-for="(item,index) in tplItemData.content.dataset_swipe" :key="index" @click="openLink(item.link)">
            <!-- <a :href="item.link? item.link: 'javascript:;'" :title="item.showtitle"> -->
              <img class="img" :src="item.pic" alt="">
            <!-- </a> -->
          </wx-swiper-item>
        </wx-swiper>
        <div class="nav-icon" v-if="tplItemData.content.dataset.length >0">
          <div v-for="(item,index) in tplItemData.content.dataset" :key="index" @click="openLink(item.link)">
                {{item.showtitle}}
          </div>
        </div>
        <div class="capsule_banner" @click="openLink(tplItemData.content.pic_link.link)">
          <img :src="tplItemData.content.capsule_icon" class="capsule_icon">
          <img src="https://img.wifenxiao.com/h5-wfx/images/diy/tpl18/capsule_font.png?v=1" class="capsule_font">
          <div class="capsule_btn">{{tplItemData.content.capsule_btn}}</div>
          <div class="capsule_title">
            <div class="title">{{tplItemData.content.capsule_title}}</div>
            <div class="tips">{{tplItemData.content.capsule_tips}}</div>
          </div>
        </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    },
    type: {
      type: String // 传入参数的类型
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
      if (link) {
        openPage(link)
      }
    },
    /**
     * 搜索商品
     */
    searchList() {
      this.$JumpName(this, 'item-list', { title: this.keyword })
    }
  }
  /* created() {
    // console.log(this.tplItemData, '33333')
  } */
})
</script>

<style lang="scss">
// 新模板
.tpl18-head-new {
  background: url("https://img.wifenxiao.com/h5-wfx/images/diy/tpl18/18headerNav.png")top left no-repeat;
  background-size: 100% auto;
  // height: 400px;
  overflow: hidden;
  &.tpl6_new {
    background: url("https://img.wifenxiao.com/h5-wfx/images/diy/tpl6/6headerNav.png")top left no-repeat;
    background-size: 100% auto;
    overflow: hidden;
  }
  .tpl18-nav {
    padding: 0 16px;
    // padding-bottom: 24px;
    .search_form {
      margin: 32px 0 24px 0;
      display: flex;
      align-items: center;
      padding: 0 26px;
      background: #fff;
      border-radius: 28px;
      .btn_sele{
        width: 32px;
        height: 32px;
        border: none;
        background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl18/18select.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        float: left;
        // margin: 4px 0 0 16px;
        margin-right: 10px;
        background-color: transparent;
      }
      input {
        width: 100%;
      }
    }
    .my-swipe {
      height: 340px;
      border-radius: 8px;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .nav-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #999;
      height: 24px;
      overflow: hidden;
      margin: 24px 0;
      div {
        &:last-child {
          border: none
        }
        border-right: 1px solid #999;
        padding: 0 24px;
      }
    }
    .capsule_banner {
      background:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl18/capsule_banner.png?v=1) left top no-repeat; 
      background-size: 100% 100%;
      height: 200px;
      position: relative;
      .capsule_font {
        position: absolute;
        right: 16px;
        top: 50px;
        width: 124px;
        height: 124px
      }
      .capsule_icon {
        position: absolute;
        width: 176px;
        height: 176px;
        object-fit: cover;
        left: 46px;
        top: 32px;
      }
      .capsule_btn {
        position: absolute;
        right: 50px;
        top: 82px;
        color: #fff;
        font-size: 48px;
        font-weight: 600;
      }
      .capsule_title {
        text-align: center;
        position: relative;
        top: 54px;
        left: 60px;
        .title {
          color: #fff;
          font-size: 44px;
          font-weight: 500;
          text-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.50);
          margin-bottom: 24px;
        }
        .tips {
          font-size: 24px;
          color: #fff;
          padding: 8px 20px;
          background-color: #F97D0B;
          border-radius: 24px;
          max-width: 280px;
          overflow: hidden;
          text-align: center;
          margin: auto;
          font-weight: 500;
          display: inline;
        }
      }
    }
  }
}
</style>